<template>
  <div class="kva-container">
    <div class="kva-contentbox">
      <home-page-header>
        <div class="kva-form-search">
          <el-form class="search-form" :inline="true" :model="queryParams" ref="searchForm">
            <el-form-item>
              <el-button type="primary" icon="Plus" @click="handleAdd">添加参数</el-button>
            </el-form-item>
            <el-form-item label="参数名称：" prop="keyword">
              <el-input v-model="queryParams.keyword" placeholder="请输入参数名称..." maxlength="100" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click.prevent="handleSearch">搜索</el-button>
              <el-button type="danger" icon="Refresh" @click.prevent="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table v-loading="tableLoading" :data="tableData" stripe border :height="settings.tableHeight()">
          <el-table-column  label="参数名称" prop="paramName"  align="center"/>
          <el-table-column  label="参数代号">
            <template v-slot="scope">
              <el-input v-model="scope.row.paramCode" @blur="handleSaveUpdate(scope.row)"></el-input>
              <div class="mt5"><span>最后更新：{{ formatTimeToStr(scope.row.updateTime) }}</span></div>
            </template>
          </el-table-column>
          <el-table-column  label="参数值" align="center">
            <template v-slot="scope">
              <el-input v-model="scope.row.paramValue" rows="15"  @blur="handleSaveUpdate(scope.row)" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="280">
            <template #default="scope">
              <el-button icon="refresh" type="success" size="small" @click.stop="handleCache(scope.row)">同步缓存</el-button>
              <el-button icon="remove" type="danger" size="small" @click.stop="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </home-page-header>
    </div>
  </div>
</template>

<script  setup>
import settings from '@/settings'
import KVA from '@/utils/kva.js'
import { formatTimeToStr } from '@/utils/date.js'
import {
  findPages,
  saveUpdate,
  deleteById,
  toggleCache
} from '@/api/platform/params.js'

// 搜索属性定义
const queryParams = reactive({
  status:"",
  keyword: ""
})

// 定义响应式得列表数据容器
const tableData = ref([])
const tableLoading = ref(false)
const searchForm = ref({})

// 加载数据
const handleLodeData = async () => {
  tableLoading.value = true
  const resp = await findPages(queryParams)
  tableLoading.value = false
  tableData.value = resp.data
}

// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1
  handleLodeData()
}

// 重置
const handleReset = () => {
  searchForm.value.resetFields()
  handleSearch()
}


// 添加事件
const handleAdd = () => {

}

// 同步缓存
const handleCache = async () => {
  await toggleCache()
  KVA.notifySuccess("同步缓存成功!")
  handleLodeData()
}


// 删除
const handleDel =  (row) => {
  KVA.confirm("警告", "<strong>您确定要执行此次操作吗？</strong>", { icon: "success" }).then(async() => {
    const opid = row.id
    await deleteById(opid)
    KVA.notifySuccess("删除成功!")
    handleLodeData()
  })
}

// 保存更新
const handleSaveUpdate = async (row) => {
  await saveUpdate(row)
  KVA.notifySuccess("操作成功!")
  handleLodeData()
}


onMounted(() => {
  handleLodeData()
})

</script>


